window.onload = async function () {
    const {data :res} = await get('/dashboard')
      const {data : {overview,year,salaryData,groupData,provinceData}} = res;
      console.log(groupData)
      for(let key in overview){
        document.querySelector('[name='+key).innerHTML = overview[key]
      }
      renderYear(year);
      renderPieClass(salaryData);
      renderClassSalart(groupData);
      initMapChart(provinceData);
      genderChart(salaryData)
      const btns = document.querySelector('#btns')
      btns.addEventListener('click',function(e){
        if(e.target.tagName==='BUTTON'){
          btns.querySelector('.btn-blue')?.classList.remove('btn-blue');
          e.target.classList.add('btn-blue');
          renderClassSalart(groupData,e.target.innerHTML);
        }
      })
    }
  // 封装函数 :
  const renderYear = data =>{
    const myChart = echarts.init(document.getElementById('line'));
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption( {
      title: {
        text : '2022年前端36期全年薪资走向',
        top : '5%',
        left : '2%',
      },
      legend: {},
      textStyle :{
        color : '#67',
      },
      xAxis: {
        data: data.map(item => item.month),
        axisLine :{
          lineStyle:{
            type : 'dashed',
            color : '#ccc',
          },
        },
        axisLabel: {
          color: "#999",
        },
      },
      yAxis: {
        splitLine :{
          lineStyle:{
            type : 'dashed'
          }
        }
      },
      tooltip: {
        trigger : 'axis'
      },
      grid : {
        top : '20%',
        left : '10%',
      },
      color : [
        {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 1,
          y2: 0,
          colorStops: [{
              offset: 0, color: '#499FEE' // 0% 处的颜色
          }, {
              offset: 1, color: '#5D75F0' // 100% 处的颜色
          }],
          global: false // 缺省为 false
        }
      ],
      series: [{
        type: 'line',
        data: data.map(item => item.salary),
        smooth : true,
        lineStyle: {
          width : '10',
        },
        symbolSize: 10,
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#499FEE",
            },
            {
              offset: 0.8,
              color: "rgba(255,255,255,0.2)",
            },
            {
              offset: 1,
              color: "rgba(255,255,255,0)",
            },
          ]),
        },
      }]
    });
  }
  const renderPieClass = data =>{
    const myChart = echarts.init(document.getElementById('salary'));
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption({
        title :{
          text : '班级就业薪资分布',
          top : '3%',
          left : '2%',
          textStyle: {
            fontSize: 16,
          },
        },
        color: ["#FDA224", "#5097FF", "#3ABCFA", "#34D39A"],
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '80%',
          left: 'center'
        },
         //中心点坐标
        center: ["50%", "45%"],
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['50%', '64%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            labelLine: {
              show: false
            },
            data: 
              data.map(item =>{
                return {
                  name : item.label,
                  value : item.g_count+item.b_count,
                }
              })
           
          }
        ]
    })
  } 
  const renderClassSalart = (data,num=1) =>{
    const myChart = echarts.init(document.getElementById('lines'));
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption({
      xAxis: {
        type: 'category',
        data: data[num].map(item =>item.name),
        axisLine:{
          lineStyle:{
            color : '#ccc',
            type : 'dashed',
          }
        },
        axisLabel :{
          color :'#333',
        }
      },
      yAxis: {
        type: 'value',
        splitLine :{
          lineStyle:{
            type : 'dashed',
          },
        },
      },
      tooltip: {
          trigger: "item",
        },
      color: [
          {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#34D39A", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(52,211,154,0.2)", // 100% 处的颜色
              },
            ],
          },
          {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#499FEE", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(73,159,238,0.2)", // 100% 处的颜色
              },
            ],
          },
        ],  
      series: [
        {
          data: data[num].map(item =>item.hope_salary),
          type: 'bar',
        },
        {
          data: data[num].map(item =>item.salary),
          type: 'bar',
        }
      ]
    })
  }
  const initMapChart = (data) => {
    const myEchart = echarts.init(document.querySelector('#map'))
    const dataList = [
      { name: '南海诸岛', value: 0 },
      { name: '北京', value: 0 },
      { name: '天津', value: 0 },
      { name: '上海', value: 0 },
      { name: '重庆', value: 0 },
      { name: '河北', value: 0 },
      { name: '河南', value: 0 },
      { name: '云南', value: 0 },
      { name: '辽宁', value: 0 },
      { name: '黑龙江', value: 0 },
      { name: '湖南', value: 0 },
      { name: '安徽', value: 0 },
      { name: '山东', value: 0 },
      { name: '新疆', value: 0 },
      { name: '江苏', value: 0 },
      { name: '浙江', value: 0 },
      { name: '江西', value: 0 },
      { name: '湖北', value: 0 },
      { name: '广西', value: 0 },
      { name: '甘肃', value: 0 },
      { name: '山西', value: 0 },
      { name: '内蒙古', value: 0 },
      { name: '陕西', value: 0 },
      { name: '吉林', value: 0 },
      { name: '福建', value: 0 },
      { name: '贵州', value: 0 },
      { name: '广东', value: 0 },
      { name: '青海', value: 0 },
      { name: '西藏', value: 0 },
      { name: '四川', value: 0 },
      { name: '宁夏', value: 0 },
      { name: '海南', value: 0 },
      { name: '台湾', value: 0 },
      { name: '香港', value: 0 },
      { name: '澳门', value: 0 },
    ]
    let option = {
      title: {
        text: '籍贯分布',
        top: 10,
        left: 10,
        textStyle: {
          fontSize: 16,
        },
      },
      tooltip: {
        trigger: 'item',
        formatter: '{b}: {c} 位学员',
        borderColor: 'transparent',
        backgroundColor: 'rgba(0,0,0,0.5)',
        textStyle: {
          color: '#fff',
        },
      },
      visualMap: {
        min: 0,
        max: 6,
        left: 'left',
        bottom: '20',
        text: ['6', '0'],
        inRange: {
          color: ['#ffffff', '#0075F0'],
        },
        show: true,
        left: 40,
      },
      geo: {
        map: 'china',
        roam: false,
        zoom: 1.0,
        label: {
          normal: {
            show: true,
            fontSize: '10',
            color: 'rgba(0,0,0,0.7)',
          },
        },
        itemStyle: {
          normal: {
            borderColor: 'rgba(0, 0, 0, 0.2)',
            color: '#e0ffff',
          },
          emphasis: {
            areaColor: '#34D39A',
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            shadowBlur: 20,
            borderWidth: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
      },
      series: [
        {
          name: '籍贯分布',
          type: 'map',
          geoIndex: 0,
          data: dataList,
        },
      ],
    }
    myEchart.setOption(option)
  }
  const genderChart = data =>{
    const myChart = echarts.init(document.getElementById('gender'));
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption( {
      title: [
        {
        text: '男女薪资分布',
        left: '2%',
      },
      {
        subtext :'男生',
        left: '45%',
        top: '40%',
      },
      {
        subtext :'女生',
        left: '45%',
        top: '90%',
      },
    ],
      series: [
        {
          type: 'pie',
          radius: [30, 45],
          top: '10%',
          height: '33.33%',
          left: 'center',
          width: 400,
          itemStyle: {
            borderColor: '#fff',
            borderWidth: 1
          },
          data: data.map(item =>{
            return {
              name : item.label,
              value : item.b_count,
            }
        })},
        {
          type: 'pie',
          radius: [30, 45],
          top: '60%',
          height: '33.33%',
          left: 'center',
          width: 400,
          itemStyle: {
            borderColor: '#fff',
            borderWidth: 1
          },
          
          data: data.map(item =>{
            return {
              name : item.label,
              value : item.g_count,
            }
          })
        }]
      })
    }